@import './tool-kits.less';

html,
body {
	width: 100%;
	height: 100%;
	font-family: mplus, Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
	line-height: 1.2rem;
	overflow: hidden;
}

// 菜单组件
#menu,
.mc-menu {
	padding: 50px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	overflow-y: hidden;
	// 开局背景图
	&.background-image {
		background: center url(../../../assets/pictures/background.jpg) no-repeat;
		background-size: 100% 100%;
	}
	// 开局后菜单的纯色背景
	&.background-pain-color {
		background: @color-background-semi-trans-grey;
	}
	.box {
		max-height: calc(100% - 2.5rem);
		overflow-y: auto;
		overflow-x: hidden;
	}
	// logo
	#title {
		position: fixed;
		top: 50px;
		background: center url(../../../assets/pictures/logo-minecraft.svg) no-repeat;
		height: 150px;
		width: 100%;
		background-size: 560px auto;
	}
	// 菜单盒
	.box {
		padding: 15px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		// 显示边框与背景
		&.border-box {
			box-shadow: @box-shadow;
			background-color: @color-btn-gray;
			border: 2px #000 solid;
		}
	}

	label {
		line-height: 36px;
		white-space: nowrap;
		&.fix-width {
			width: 5rem;
			min-width: 5rem;
		}
		&.fix-width-mini {
			width: 2rem;
			min-width: 2rem;
		}
	}

	.box-line {
		display: flex;
		gap: 15px;
		width: 400px;
		&.title {
			justify-content: space-around;
			height: 2rem;
		}
	}

	// 按钮
	.button {
		.box-item;
		.box-item-block;
		text-align: center;
		background: url(../../../assets/pictures/button-wallpaper.png);
	}
	// 下拉框
	.select {
		.box-item;
		.box-item-block;
		padding: 1px 4px;
		background: url(../../../assets/pictures/button-wallpaper.png);
		option {
			background: @color-btn-gray;
		}
	}
	// 输入框
	.text-input {
		.box-item;
		background: @color-box-input-deep-grey;
		padding: 1px 4px;
		border: 3px @color-box-shadow-light-gray solid;
		min-width: 0;
		&:active,
		&:focus {
			border: 3px @color-box-highlight solid;
		}
	}
	// 复选框
	.checkbox-item,
	.radio-item {
		.box-item;
		min-width: 0;
		input[type^='checkbox'],
		input[type^='radio'] {
			outline: none;
			height: 0;
			width: 0;
			margin-right: 2rem;
			line-height: 1rem;
			&::before {
				content: '';
				.box-item-block;
				display: block;
				text-align: center;
				margin-top: -1rem;
				width: 1rem;
				height: 1rem;
				background-color: @color-box-shadow-light-gray;
			}
			&:checked::before {
				content: '×';
			}
			&:active::before {
				box-shadow: @box-shadow-reverse;
			}
		}
		input[type^='radio'] {
			&::before {
				border-radius: 1rem;
				overflow: hidden;
			}
		}
	}
	// 文件上传框
	.file-loader {
		display: none;
	}
	// 滑轨
	.range-item {
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		gap: 1rem;
		.range {
			flex-grow: 1;
			flex-shrink: 1;
			min-width: 0;
			height: 36px;
			appearance: none;
			-webkit-appearance: none;
			background-color: #00000000;
			&::-webkit-slider-runnable-track {
				height: 16px;
				box-sizing: content-box;
				border: 2px #000 solid;
				background-color: @color-box-shadow-light-gray;
			}
			&::-webkit-slider-thumb {
				width: 27px;
				height: 36px;
				margin-top: -9px;
				box-shadow: @box-shadow;
				border: 2px #000 solid;
				-webkit-appearance: none;
				background: url(../../../assets/pictures/button-wallpaper.png);
				&:active {
					box-shadow: @box-shadow-reverse;
				}
			}
			&:focus {
				outline: none;
			}
		}
		label {
			flex-shrink: 0;
			flex-grow: 0;
		}
	}
}

#help {
	li {
		list-style-type: none;
	}
	.help-item {
		margin-left: -1rem;
	}
}

// 通知
#notify {
	.hud-box;
	position: fixed;
	top: unset;
	bottom: 20%;
	width: auto;
	height: auto;
	padding: 1rem;
	left: 50%;
	transform: translate(-50%);
}

.covered {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.hidden {
	display: none !important;
}

.mc-menu {
	padding: 0;
}

#player-name-content textarea {
	word-break: break-all;
	word-wrap: break-word;
	resize: none;
	&::-webkit-scrollbar {
		width: 0 !important;
	}
	overflow: -moz-scrollbars-none;
}

#HUD-stage,
#game-stage,
#menu,
#controller {
	.covered;
}

// z-index

// - game-stage: 9
// - fps: 99
// - crosshairs: 99
// - controller: 999
// - bag: 9999
// 	- bag-box: 99999
// - menu: 999999
// 	- .box: 9999999
// - notify: 99999999
#app {
	#game-stage {
		position: fixed;
		&,
		canvas {
			z-index: 9;
		}
	}
	#HUD-stage {
		&,
		#crosshairs,
		#fps {
			z-index: 99;
		}
		#controller {
			z-index: 999;
		}
		#bag {
			&,
			& > div {
				z-index: 9999;
			}
			#bag-box {
				z-index: 99999;
			}
		}
	}
	#menu {
		&,
		& > div {
			z-index: 999999;
		}
		& > .box {
			z-index: 9999999;
		}
	}
	#notify {
		z-index: 99999999 !important;
	}
}

// 心跳
@keyframes icon-animate {
	0%,
	100% {
		transform: scale(1);
	}
	10%,
	30% {
		transform: scale(0.9);
	}
	20%,
	40%,
	60%,
	80% {
		transform: scale(1.1);
	}
	50%,
	70% {
		transform: scale(1.1);
	}
}

.with-love {
	animation: icon-animate 1.33s ease-in-out infinite;
	display: inline-block;
	color: #e25555;
}

// 隐藏VR按键
#VRButton {
	display: none;
}

#xbox-img,
#ps-img {
	max-width: 100%;
}
